<template>
<div>
  <div class="singer-img">
    <van-icon name="arrow-left" class="left" @click="changeUrl1"/>
    <input type="file" @change="newimg($event)">
<!--    <img :src="userInfo.avatar" alt=""><br>-->
    <van-icon name="checked" color="lightblue"/>
<!--    <p>{{// userInfo.userName}}</p>-->

    <nav class="action">
      <button @click="wirte">编辑</button>
      <button>更换背景</button>
      <input class="input1" type="file" @change="newbgi($event)">
    </nav>

    <div :style="{'background-image': 'url('+imgUrl+')'}"></div>
  </div>
</div>
</template>

<script>
import {getChangephoto, getPersoninfo, getUploadpictures} from "@/api/api-Login";

export default {
name: "PersonInfoheader",
  data(){
  return{

    // active:0,
    imgUrl :"http://attach.bbs.miui.com/forum/201309/03/150928ozb82vyzhzsv96ov.jpg",
    // userInfo:[],
  }
  },
  methods:{
    changeUrl(){
      this.$router.push("/")
    },
    changeUrl1(){
      this.$router.go("-1")
    },
    newimg(e){
      getChangephoto(e.target.files).then(res=>{
        console.log(res);
        if(res.code===0){
          getPersoninfo().then(res=>{
            console.log(res)
            if(res.code===0){
              this.userInfo = res.data;
            }else {
              this.$toast(res.msg)
            }
          })
        }

      })

    },
    wirte(){
         this.$router.push("/ChangeUserinfo")
    },
    newbgi(e){
      this.flag=false;
      getUploadpictures(e.target.files).then()(res=>{
        console.log(e.target.files)
        // console.log(res)
        if(res===0){
          this.imgUrl = res.url;
          // localStorage.setItem("img",res.url)
          this.flag = true;
        }
      })

    }
  },
  created() {
    // this.imgUrl = localStorage.getItem("img") || "http://attach.bbs.miui.com/forum/201309/03/150928ozb82vyzhzsv96ov.jpg";
    getPersoninfo().then(res=>
    {
      console.log(res)
      // if(res.code==0){
      //
      //   // this.$store.commit("login/changeUserInfo",res.data)
      //
      // }else {
      //   this.$toast("错误")
      // }
    })
  },

}
</script>

<style scoped lang="less">
.singer-img {
  width: 100%;
  height: 170px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
.left{
  position: absolute;
  top:10px;
  left: 5px;
  z-index: 300;
  color: white;
}

i {
  position: absolute;
  top: 80px;
  left: 35px;
  font-size: 20px;
  z-index: 200;
}

img {
  position: absolute;
  left: 20px;
  top: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 100;
}
input{
  display: inline-block;
  width: 50px;
  position: absolute;
  top: 50px;
  left: 20px;
  z-index: 105;
  opacity: 0;
}
.input1{
  position: absolute;
  top: 0;
  left: 55px;

  z-index: 200;
}
p {
  width: 50px;
  text-align: center;
  position: absolute;
  top: 100px;
  left: 20px;
  margin: 0;
  padding: 0;
  height: 30px;
  /*text-align: center;*/

  font-size: 16px;
  margin-bottom: 20px;
}
.action{
  position: absolute;
  right: 20px;
  top: 100px;
  z-index: 105;
}
button{
  padding: 5px;

  background-color: rgba(232,232,232,0.9);
  border: 0;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 10px;


}

div {
  width: 100%;
  height: 100%;
  opacity: 0.2;
  background-color: #f8c66b;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}
}
</style>